<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="患者名称" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入姓名"
          clearable
          size="small"
          style="width: 200px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="检测项目" prop="testItem">
        <el-select
          v-model="queryParams.testItem"
          placeholder="请选择检测项目"
          clearable
          size="small"
          style="width: 200px"
        >
          <el-option
            v-for="dict in testItemOptions"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="检测时间">
        <el-date-picker
          v-model="dateRange"
          size="small"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="病患情况" prop="diseasesHistory">
        <el-select
          v-model="queryParams.diseasesHistory"
          placeholder="请选择病患情况"
          clearable
          size="small"
          style="width: 200px"
        >
          <el-option
            v-for="dict in diseasesHistoryList"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >查询</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8" style="float: right">
      <el-col :span="3.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExportPdf"
        >导出本页合同</el-button>
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          >报表导出</el-button>
        <el-col :span="1.5">
          <el-button
            plain
            icon="el-icon-refresh"
            size="mini"
            @click="getList"
          >刷新</el-button>
        </el-col>
      </el-col>
    </el-row>

    <el-table
      v-loading="loading"
      :data="configList"
    >
      <el-table-column
        label="序号"
        type="index"
        width="50"
        align="center">
        <template slot-scope="scope">
          <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="患者姓名"
        align="center"
        prop="name"
      />
      <el-table-column
        label="检测项目"
        align="center"
        prop="testItem"
        :show-overflow-tooltip="true"
        width="200"
      >

        <template slot-scope="scope">{{ scope.row.testItem?testItemOptionsObj[scope.row.testItem]:'' }}</template>
      </el-table-column>
      <el-table-column
        label="病患情况"
        align="center"
        prop="diseasesHistory"
        width="200"
      >
        <template slot-scope="scope">
          <el-tooltip placement="top">
            <div style="max-width:300px" v-html="scope.row.diseasesHistory" slot="content"></div>
            <span class="toolOverHiddlen">{{ scope.row.diseasesHistory }}</span>
          </el-tooltip>
       </template>

      </el-table-column>

      <el-table-column
        label="检测时间"
        align="center"
        prop="createTime"
      />
      <el-table-column
        label="身份证号"
        align="center"
        prop="idNo"
      />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="200"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleContractView(scope.row, 'detail')"
            v-hasPermi="['view:contract']"
          >查看合同</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleFormView(scope.row)"
            v-hasPermi="['view:form']"
          >查看表单</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleUserView(scope.row)"
            v-hasPermi="['view:form:user']"
          >查看用户</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleContractView(scope.row, 'edit')"
            v-hasPermi="['view:form:edit']"
          >编辑</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['view:form:del']"
            >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <viewUser v-if="viewUserVisible" @viewUserFormClose="viewUserFormClose" ref="viewUserRef"/>
    <viewForm v-if="viewFormVisible" @viewFormClose="viewFormClose" ref="viewFormRef"/>
    <viewContract v-if="viewContractVisible" @viewContractClose="viewContractClose" ref="viewContractRef"/>

  </div>
</template>

<script>
import {contractList, deleteContract, exportConfig, formViewContractPdf} from "@/api/singera/applyForm";
import {downloadFileFn, downloadPDFFn} from "@/utils/index";
import viewUser from './userView'
import viewForm from './formView'
import viewContract from './contractView'

export default {
  name: "Config",
  components:{
    viewUser,
    viewForm,
    viewContract
  },
  data () {
    return {
      viewContractVisible: false,
      viewFormVisible: false,

      viewUserVisible: false,
      testItemOptionsObj:{
        '0': 'CA0L01肠癌多基因甲基化检测·标准版',
        '1': 'CA0L02肠癌多基因甲基化检测·检测版'
      },
      testItemOptions:[
        {
          label:'CA0L01肠癌多基因甲基化检测标准版',
          value:'0'
        },
        {
          label:'CA0L02肠癌多基因甲基化检测检测版',
          value:'1'
        }
      ],
      diseasesHistoryObj: {
        '0': '有慢性腹泻史',
        '1': '有慢性便秘史',
        '2': '有黏液或便血史',
        '3': '有慢性阑尾炎或阑尾切除史',
        '4': '有慢性胆囊炎或胆囊切除史',
        '5': '有慢性肠炎史',
        '6': '有近20年来有无经历过对精神造成较大创伤或痛苦的事件',
        '7': '有癌症史',
        '8': '有肠息肉史',
        '9': '有吸烟史',
        '10': '有饮酒史',
        '11': '有糖尿病史等既往病史'
      },
      diseasesHistoryList: [
        {
          label:'有慢性腹泻史',
          value:'0'
        },
        {
          label:'有慢性便秘史',
          value:'1'
        },
        {
          label:'有黏液或便血史',
          value:'2'
        },
        {
          label:'有慢性阑尾炎或阑尾切除史',
          value:'3'
        },
        {
          label:'有慢性胆囊炎或胆囊切除史',
          value:'4'
        },
        {
          label:'有慢性肠炎史',
          value:'5'
        },
        {
          label:'有近20年来有无经历过对精神造成较大创伤或痛苦的事件',
          value:'6'
        },
        {
          label:'有癌症史',
          value:'7'
        },
        {
          label:'有肠息肉史',
          value:'8'
        },
        {
          label:'有吸烟史',
          value:'9'
        },
        {
          label:'有饮酒史',
          value:'10'
        },
        {
          label:'有糖尿病史等既往病史',
          value:'11'
        }
      ],
      careerObj:{
        '0': '政府机关',
        '1': '事业单位',
        '2': '国营企业',
        '3': '民营企业',
        '4': '农民',
        '5': '自由职业',
        '6': '无业',
        '7': '其他'
      },
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 参数表格数据
      configList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 50,
        name: undefined,
        testItem: undefined,
        diseasesHistory: undefined
      },
      dateRange:[],
    };
  },
  created () {

    if (this.$route.query.row){
      this.queryParams.name = this.$route.query.row.name;
      this.queryParams.testItem = this.$route.query.row.testItem;

    }
    this.getList();
  },
  methods: {
    //查看合同
    viewContractClose(){
      this.viewContractVisible = false
    },
    handleContractView(row, type){
      this.viewContractVisible = true
      const params = {
        id: row.id,
        type: type,
        testItemOptionsObj: this.testItemOptionsObj,
        careerObj: this.careerObj
      }
      this.$nextTick(() => {
        this.$refs.viewContractRef.init(params)
      })
    },

    // 查看表单
    handleFormView(row){
      this.viewFormVisible = true
      const params = {
        id: row.id,
        testItemOptionsObj: this.testItemOptionsObj,
        careerObj: this.careerObj
      }
      this.$nextTick(() => {
        this.$refs.viewFormRef.init(params)
      })
    },
    viewFormClose(){
      this.viewFormVisible = false
    },





    // 查看用户
    handleUserView(row){
      this.viewUserVisible = true
      const params = {
        row: row,
        testItemOptionsObj: this.testItemOptionsObj,
        careerObj: this.careerObj
      }
      this.$nextTick(() => {
        this.$refs.viewUserRef.init(params)
      })
    },
    viewUserFormClose(){
      this.viewUserVisible = false

    },
    /** 查询参数列表 */
    getList () {
      this.loading = true;
      contractList(this.addDateRangeNew(this.queryParams, this.dateRange, ['timeStart', 'timeEnd'], true)).then(response => {
        this.configList = response.rows;
        this.total = response.total;
        this.loading = false;
      }
      );
    },


    // 表单重置
    // reset () {
    //   this.form = {
    //     configId: undefined,
    //     configName: undefined,
    //     configKey: undefined,
    //     configValue: undefined,
    //     configType: "Y",
    //     remark: undefined
    //   };
    //   this.resetForm("form");
    // },
    /** 搜索按钮操作 */
    handleQuery () {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.dateRange = []
      this.resetForm("queryForm");
      this.queryParams = {
        pageNum: 1,
          pageSize: 10,
          name: undefined,
          testItem: undefined,
          diseasesHistory: undefined
      }
      this.handleQuery();
    },
    /** 删除按钮操作 */
    handleDelete (row) {
      const configIds = row.id ;
      this.$confirm('确定要删除吗?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return deleteContract(configIds);
      }).then(() => {
        this.getList();
        this.msgSuccess("删除成功");
      })
    },
    handleExportPdf () {
      for (let i = 0; i < this.configList.length; i++) {
        const date = new Date(this.configList[i].createTime).getFullYear().toString() + ((new Date(this.configList[i].createTime).getMonth() + 1) < 10 ? ('0' + (new Date(this.configList[i].createTime).getMonth() + 1)) : (new Date(this.configList[i].createTime).getMonth() + 1).toString()) + (new Date(this.configList[i].createTime).getDate() < 10 ? ('0' + new Date(this.configList[i].createTime).getDate()) : new Date(this.configList[i].createTime).getDate())
        this.contractPdf(this.configList[i].id).then(res =>{
          // debugger
          downloadPDFFn(res, date + '-' + this.configList[i].sampleNo + '-' + this.configList[i].name + (parseInt(this.configList[i].testItem) === 1 ? '-CAOL02肠癌多基因甲基化检测项目·检测版' : '-CAOL01肠癌多基因甲基化检测项目·标准版'))
        })
      }
    },
    contractPdf(id){
      return new Promise(resolve => {
        formViewContractPdf(id).then(response => {
          resolve(response)
        });
      })
    },
    /** 导出按钮操作 */
    handleExport () {
      const queryParams = this.addDateRangeNew(this.queryParams, this.dateRange, ['timeStart', 'timeEnd'], true);
      // delete queryParams.pageNum
      // delete queryParams.pageSize
      this.$confirm('是否确认导出所有数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        exportConfig(queryParams).then(res => {
          downloadFileFn(res, '合同报表');
        });
      })
    }
  }
};
</script>
